<template>
  <el-button size="small" color="#ffffff" text @click="openAbout">关于</el-button>
  <el-dialog width="40%" v-model="visible" :modal="false" :close-on-click-modal="false" top="200px"
             custom-class="about" :show-close="false">
    <div style="display: flex; flex-direction: column; margin-left: 20px">
      <p>待办任务管理 1.0.3</p>
      <p>Copyright(C) 2022-2022 By HuAnchao</p>
      <p style="margin: 0">本软件使用的第三方库：</p>
      <el-link type="primary" style="width: 60px; font-weight: normal" @click="openTaskbook">taskbook</el-link>
    </div>
    <template #header>
      <img src="../../public/taskui.ico" style="height: 20px; align-self: center; margin-left: 6px">
      <spna style="line-height: 30px; margin-left: 2px">关于任务管理</spna>
      <div text class="close-btn" @click="handleOk">
        <close-outlined style="align-self: center" />
      </div>
    </template>
    <template #footer>
      <div style="display: block; padding-left: 20px;">
        <el-link type="primary" style="height: 22px; width: 36px; font-weight: normal; position: absolute; left: 40px"
                 @click="openGitee">Gitee
        </el-link>
        <el-button plain @click="handleOk">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';

export default {
  setup() {
    const visible = ref(false);
    return {
      visible
    }
  },
  components: {
    CloseOutlined
  },
  methods: {
    openAbout() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    openGitee() {
      const href = "https://gitee.com/shio2755/taskui";
      window.electronAPI.openHref(href);
    },
    openTaskbook() {
      const href = "https://github.com/klaussinani/taskbook";
      window.electronAPI.openHref(href);
    }
  }
}
</script>
